<!DOCTYPE html>
<html class="overflow-hidden">
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="no"/>
    <meta name="wap-font-scale" content="no">
    <meta content="telephone=no" name="format-detection">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>礼仪之邦-我的足迹</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/swiper.min.css"/>
    <link rel="stylesheet" href="css/public.css"/>
    <link rel="stylesheet" href="css/app.css"/>
</head>
<body class="overflow-hidden">
<div class="collect-bar register-bar footprint-bar" style="background: #f5f5f5;">
    <h2 class="header-box pos-abs-tl">
        <a class="go-back-btn sprite-icon" href="javascript:;"></a>
        我的足迹
        <span id="delBtn" class="has-text">编辑</span>
    </h2>

    <div class="collect-cont">
        <!--没有收藏-->
        <div class="footprint-none">
            <img src="img/footprint-none.png">
            <span>暂无浏览记录</span>
            <a href="#">去首页逛逛</a>
        </div>
        <!--收藏数据列表-->
        <div id="wrapper">
            <div id="scroller">
                <div id="handleList" class="collect-list footprint-list">
                    <ul>
                        <li class="collect-over">
                            <label class="checkbox-bar">
                                <input type="checkbox" value="">
                                <span></span>
                            </label>

                            <div class="collect-list-cont">
                                <div class="collect-intro">
                                    <a href="#">
                                        <label class="collect-img">
                                            <img src="img/collect-img.jpg">
                                            <span class="collect-over-img"><img src="img/collect-over.png"></span>
                                        </label>

                                        <div class="collect-intro-text">
                                            <p class="collect-name text-clamp-overflow">祥云和山茶油家庭装1L压榨</p>

                                            <p class="collect-price">￥148.00元</p>
                                        </div>
                                    </a>

                                    <div class="footprint-handle pos-abs-br">
                                        <span class="sprite-icon icon-share"></span>
                                        <span class="shop-car-btn">
                                            <i class="sprite-icon"></i>
                                            购物车
                                        </span>
                                    </div>
                                </div>
                                <div class="collect-list-disk"></div>
                            </div>
                        </li>
                        <li class="">
                            <label class="checkbox-bar">
                                <input type="checkbox" value="">
                                <span></span>
                            </label>

                            <div class="collect-list-cont">
                                <div class="collect-intro">
                                    <a href="#">
                                        <label class="collect-img">
                                            <img src="img/collect-img.jpg">
                                            <span class="collect-over-img"><img src="img/collect-over.png"></span>
                                        </label>

                                        <div class="collect-intro-text">
                                            <p class="collect-name text-clamp-overflow">祥云和山茶油家庭装1L压榨</p>

                                            <p class="collect-price">￥148.00元</p>
                                        </div>
                                    </a>

                                    <div class="footprint-handle pos-abs-br">
                                        <span class="sprite-icon icon-share"></span>
                                        <span class="shop-car-btn">
                                            <i class="sprite-icon"></i>
                                            购物车
                                        </span>
                                    </div>
                                </div>
                                <div class="collect-list-disk"></div>
                            </div>
                        </li>
                        <li class="">
                            <label class="checkbox-bar">
                                <input type="checkbox" value="">
                                <span></span>
                            </label>

                            <div class="collect-list-cont">
                                <div class="collect-intro">
                                    <a href="#">
                                        <label class="collect-img">
                                            <img src="img/collect-img.jpg">
                                            <span class="collect-over-img"><img src="img/collect-over.png"></span>
                                        </label>

                                        <div class="collect-intro-text">
                                            <p class="collect-name text-clamp-overflow">祥云和山茶油家庭装1L压榨</p>

                                            <p class="collect-price">￥148.00元</p>
                                        </div>
                                    </a>

                                    <div class="footprint-handle pos-abs-br">
                                        <span class="sprite-icon icon-share"></span>
                                        <span class="shop-car-btn">
                                            <i class="sprite-icon"></i>
                                            购物车
                                        </span>
                                    </div>
                                </div>
                                <div class="collect-list-disk"></div>
                            </div>
                        </li>
                        <li class="">
                            <label class="checkbox-bar">
                                <input type="checkbox" value="">
                                <span></span>
                            </label>

                            <div class="collect-list-cont">
                                <div class="collect-intro">
                                    <a href="#">
                                        <label class="collect-img">
                                            <img src="img/collect-img.jpg">
                                            <span class="collect-over-img"><img src="img/collect-over.png"></span>
                                        </label>

                                        <div class="collect-intro-text">
                                            <p class="collect-name text-clamp-overflow">祥云和山茶油家庭装1L压榨</p>

                                            <p class="collect-price">￥148.00元</p>
                                        </div>
                                    </a>

                                    <div class="footprint-handle pos-abs-br">
                                        <span class="sprite-icon icon-share"></span>
                                        <span class="shop-car-btn">
                                            <i class="sprite-icon"></i>
                                            购物车
                                        </span>
                                    </div>
                                </div>
                                <div class="collect-list-disk"></div>
                            </div>
                        </li>
                        <li class="">
                            <label class="checkbox-bar">
                                <input type="checkbox" value="">
                                <span></span>
                            </label>

                            <div class="collect-list-cont">
                                <div class="collect-intro">
                                    <a href="#">
                                        <label class="collect-img">
                                            <img src="img/collect-img.jpg">
                                            <span class="collect-over-img"><img src="img/collect-over.png"></span>
                                        </label>

                                        <div class="collect-intro-text">
                                            <p class="collect-name text-clamp-overflow">祥云和山茶油家庭装1L压榨</p>

                                            <p class="collect-price">￥148.00元</p>
                                        </div>
                                    </a>

                                    <div class="footprint-handle pos-abs-br">
                                        <span class="sprite-icon icon-share"></span>
                                        <span class="shop-car-btn">
                                            <i class="sprite-icon"></i>
                                            购物车
                                        </span>
                                    </div>
                                </div>
                                <div class="collect-list-disk"></div>
                            </div>
                        </li>
                        <li class="">
                            <label class="checkbox-bar">
                                <input type="checkbox" value="">
                                <span></span>
                            </label>

                            <div class="collect-list-cont">
                                <div class="collect-intro">
                                    <a href="#">
                                        <label class="collect-img">
                                            <img src="img/collect-img.jpg">
                                            <span class="collect-over-img"><img src="img/collect-over.png"></span>
                                        </label>

                                        <div class="collect-intro-text">
                                            <p class="collect-name text-clamp-overflow">祥云和山茶油家庭装1L压榨</p>

                                            <p class="collect-price">￥148.00元</p>
                                        </div>
                                    </a>

                                    <div class="footprint-handle pos-abs-br">
                                        <span class="sprite-icon icon-share"></span>
                                        <span class="shop-car-btn">
                                            <i class="sprite-icon"></i>
                                            购物车
                                        </span>
                                    </div>
                                </div>
                                <div class="collect-list-disk"></div>
                            </div>
                        </li>
                        <li class="">
                            <label class="checkbox-bar">
                                <input type="checkbox" value="">
                                <span></span>
                            </label>

                            <div class="collect-list-cont">
                                <div class="collect-intro">
                                    <a href="#">
                                        <label class="collect-img">
                                            <img src="img/collect-img.jpg">
                                            <span class="collect-over-img"><img src="img/collect-over.png"></span>
                                        </label>

                                        <div class="collect-intro-text">
                                            <p class="collect-name text-clamp-overflow">祥云和山茶油家庭装1L压榨</p>

                                            <p class="collect-price">￥148.00元</p>
                                        </div>
                                    </a>

                                    <div class="footprint-handle pos-abs-br">
                                        <span class="sprite-icon icon-share"></span>
                                        <span class="shop-car-btn">
                                            <i class="sprite-icon"></i>
                                            购物车
                                        </span>
                                    </div>
                                </div>
                                <div class="collect-list-disk"></div>
                            </div>
                        </li>
                        <li class="">
                            <label class="checkbox-bar">
                                <input type="checkbox" value="">
                                <span></span>
                            </label>

                            <div class="collect-list-cont">
                                <div class="collect-intro">
                                    <a href="#">
                                        <label class="collect-img">
                                            <img src="img/collect-img.jpg">
                                            <span class="collect-over-img"><img src="img/collect-over.png"></span>
                                        </label>

                                        <div class="collect-intro-text">
                                            <p class="collect-name text-clamp-overflow">祥云和山茶油家庭装1L压榨</p>

                                            <p class="collect-price">￥148.00元</p>
                                        </div>
                                    </a>

                                    <div class="footprint-handle pos-abs-br">
                                        <span class="sprite-icon icon-share"></span>
                                        <span class="shop-car-btn">
                                            <i class="sprite-icon"></i>
                                            购物车
                                        </span>
                                    </div>
                                </div>
                                <div class="collect-list-disk"></div>
                            </div>
                        </li>
                        <li class="">
                            <label class="checkbox-bar">
                                <input type="checkbox" value="">
                                <span></span>
                            </label>

                            <div class="collect-list-cont">
                                <div class="collect-intro">
                                    <a href="#">
                                        <label class="collect-img">
                                            <img src="img/collect-img.jpg">
                                            <span class="collect-over-img"><img src="img/collect-over.png"></span>
                                        </label>

                                        <div class="collect-intro-text">
                                            <p class="collect-name text-clamp-overflow">祥云和山茶油家庭装1L压榨</p>

                                            <p class="collect-price">￥148.00元</p>
                                        </div>
                                    </a>

                                    <div class="footprint-handle pos-abs-br">
                                        <span class="sprite-icon icon-share"></span>
                                        <span class="shop-car-btn">
                                            <i class="sprite-icon"></i>
                                            购物车
                                        </span>
                                    </div>
                                </div>
                                <div class="collect-list-disk"></div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="collect-bottom pos-abs-bl animated-bottom">
        <div id="allCheckBar"
             style="width: 70px; height: 100%; position: absolute; top: 0; left: 0; z-index: 999;"></div>
        <div class="collect-handle">
            <div class="checkbox-box">
                <label class="checkbox-bar" style="left: 10px;">
                    <input id="allCheckBox" type="checkbox" value="">
                    <span></span>
                </label>
                全选
            </div>

            <div class="flex-btn">
                <a id="footprintCancel" class="flex-btn-left" href="javascript:;"><span>取消</span></a>
                <a id="footprintDelete" class="flex-btn-right active" href="javascript:;"><span>删除</span></a>
            </div>
        </div>
    </div>
</div>

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/iscroll.js"></script>
<script src="js/box.js"></script>
<script src="js/public.js"></script>
<script>
    $(function () {

        var myScroll = publicFuns.newIScroll("#wrapper");
        var _footprintType = true;    //足迹状态。false没有足迹，true有足迹

        collectFun(_footprintType);
        function collectFun(type) {
            if (!type) {
                $(".footprint-none").show();
                $(".collect-list").hide();
                $(".collect-bottom").hide();
            } else {
                $(".footprint-none").hide();
                $(".collect-list").show();
                $(".collect-bottom").show();
            }
        }

        //购物车
        $(".shop-car-btn").on("click", shopCar);
        function shopCar() {
            if ($(this).parents("li").hasClass("collect-over")) {
                $.jAlert("已售罄的商品不能加入购物车！", 220, 50, "j-alert-ani");
            } else {
                $.jAlert("加入购物车成功！", 140, 50, "j-alert-ani");
            }
        }

        //编辑按钮
        $("#delBtn").click(function () {
            var _bar = $(".footprint-bar");
            $("#handleList").find(".collect-intro").toggleClass("active");
            _bar.toggleClass("active");
            $(".animated-bottom").toggleClass("active");
            $(".collect-list-disk").toggleClass("active");
            if (_bar.hasClass("active")) {
                $(".shop-car-btn").off("click", shopCar);
                $(this).text("完成");
            } else {
                $(".shop-car-btn").on("click", shopCar);
                $(this).text("编辑");
            }
            myScroll.refresh();
        });

        //选择
        window._isAllCheck = false;
        $("#handleList").find(".collect-list-disk").click(function () {
            var _tag = $("#handleList");
            var $this = $(this);
            $this.parents(".collect-list-cont").prev().toggleClass("active");
            if ($this.parents(".collect-list-cont").prev().hasClass("active")) {
                $this.parents(".collect-list-cont").prev().find("input").prop("checked", true);
            } else {
                $this.parents(".collect-list-cont").prev().find("input").prop("checked", false);
            }
            if (_tag.find(".checkbox-bar.active").length == _tag.find("li").length) {
                $("#allCheckBox").prop("checked", true).parents(".checkbox-bar").addClass("active");
                window._isAllCheck = true;
            } else {
                $("#allCheckBox").prop("checked", false).parents(".checkbox-bar").removeClass("active");
                window._isAllCheck = false;
            }
        });

        //全选
        $("#allCheckBar").click(function () {
            var _tag = $("#handleList");
            publicFuns.allChecked("#allCheckBar", "#handleList", function () {
                _tag.find(".checkbox-bar").addClass("active");
                _tag.find("input[type='checkbox']").prop("checked", true);
            }, function () {
                _tag.find(".checkbox-bar").removeClass("active");
                _tag.find("input[type='checkbox']").prop("checked", false);
            });
        });

        //取消
        $("#footprintCancel").click(function () {
            $("#handleList").find(".collect-intro").removeClass("active");
            $(".footprint-bar").removeClass("active");
            $(".animated-bottom").removeClass("active");
            $(".collect-list-disk").removeClass("active");
            $(".shop-car-btn").on("click", shopCar);
            $("#delBtn").text("编辑");
            window._isAllCheck = false;
            $(".checkbox-bar").removeClass("active").find("input").prop("checked", false);
            myScroll.refresh();
        });

        //批量删除
        $("#footprintDelete").click(function () {
            var _d = $("#handleList");
            var _tag = _d.find(".checkbox-bar.active");
            var _i = _d.find("li").length;
            var _num = _tag.length;
            if (_num == 0) {
                $.jAlert("请选择要删除的足迹！", 200, 50, "j-alert-ani");
            } else {
                $.jConfirm(["您确定要删除足迹吗？", "确定", "取消"], function () {
                    $.jAlert("删除成功！", 140, 50, "j-alert-ani");

                    _tag.parents("li").animate({
                        "left": "-100%"
                    }, 300, function () {
                        $(this).remove();
                        $("#handleList").find(".collect-intro").removeClass("active");
                        $(".footprint-bar").removeClass("active");
                        $(".animated-bottom").removeClass("active");
                        $(".collect-list-disk").removeClass("active");
                        $(".shop-car-btn").on("click", shopCar);
                        $("#delBtn").text("编辑");
                        myScroll.refresh();
                        _i = _i - _num;
                        if (_i < 0) return false;
                        if (_i == 0) {
                            deleteAll(_i);
                            return false;
                        }
                    });
                }, "", "", "", "");
            }
        });

        function deleteAll(n) {
            if (n == 0) {
                window._isAllCheck = false;
                _footprintType = false;
                collectFun(_footprintType);
            }
        }
    });
</script>
</body>
</html>
